<template>
	<view class="page"  :style="{'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader" ></c-nav-bar>
		<view class="tophead">
			<view class="p1">
				<text>{{myList.routeName}}</text>
			</view>
			<view class="p2">
				<span>退订份数</span>
				<span>1</span>
			</view>
		</view>
		<view class="tit">退订原因</view>
		<u-radio-group v-model="checkboxValue" placement="column" iconPlacement="right" style="white" @change="change">
			<u-radio :customStyle="{padding: '28rpx 24rpx',borderBottom:'1px solid #eee',background:'#fff'}"
				v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.name" shape="circle"
				size="36" labelSize="28" icon-size="22">
			</u-radio>
		</u-radio-group>
		<view class="tit">更多不爽？吐槽一下</view>
		<u--textarea v-model="value1" placeholder="请输入内容" :height='120' count border='surround'
			style="margin-top: 20rpx;" :adjustPosition='true'> </u--textarea>
		<view class="bnts" @click="tuikuan()">
			<u-button type="primary"
				customStyle="height:88rpx;border-radius:44rpx;background:#007A69;width:90%;font-size:32rpx">申请退款</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader:'申请退款',
				tuikuanSuccess: '退款成功',
				checkboxValue: '',
				checkboxList: [{
						name: "临时不想去了",
					}, {
						name: "旅行社确认慢"
					},
					{
						name: "天气不合适"
					},
					{
						name: "变更行程或订单信息"
					},
					{
						name: "订单信息填错"
					},
					{
						name: "重复购买"
					},
					{
						name: "其他原因"
					},
				],
				value: 1,
				list: {
					orderCode: '',
					refundReason: ''
				},
				queryValue: {},
				myList: {},
				value1: ''
			}
		},
		onLoad(option) {
			this.orderId = option.id
			this.getList()

		},
		methods: {
			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
			getList() {
				this.$api.get('/api/guide/selectOrderDetail/' + this.orderId)
					.then(res => {
						if (res.data.code == 0) {
							this.myList = res.data.data
							this.list.orderCode = res.data.data.orderCode
						}
					})
			},
			tuikuan() {
				if (!(this.list.refundReason || this.value1)) {
					this.$showToast('请填写退款原因');
					return
				}
				this.list.refundReason = this.list.refundReason + this.value1
				this.$api.post('/api/guide/refundOrder', this.list).then(res => {

					if (res.data.code == 0) {
						this.queryValue.outRefundNo = res.data.data.outRefundNo
						this.queryValue.outTradeNo = res.data.data.outTradeNo
						this.queryValue.refundFee = res.data.data.refundFee
						this.queryValue.totalFee = res.data.data.totalFee
						// this.queryValue.refundFee = res.data.data.refundFee*100
						// this.queryValue.totalFee = res.data.data.totalFee*100
						this.$api.post('/order/icbc/refund', this.queryValue).then(result => {
							if (result.data.returnMsg == "OK") {
								uni.showToast({
									title: '退款成功',
									duration: 2000,
									icon: 'none',
								})
								setTimeout(() => {
										uni.reLaunch({
											url: '/pagesMy/guideServe/guideServe'
										})
									},
									2000)
							} else {
								uni.showToast({
									title: '退款失败',
									duration: 2000,
									icon: 'none',
								})
								setTimeout(() => {
										uni.reLaunch({
											url: '/pagesMy/guideServe/guideServe'
										})
									},
									2000)

							}
						})
					} else {
						uni.showToast({
							title: '退款失败2',
							duration: 2000,
							icon: 'none',
						})

						setTimeout(() => {
								uni.reLaunch({
									url: '/pagesMy/guideServe/guideServe'
								})
							},
							2000)
					}
				})
			},
			change() {
				this.list.refundReason = this.checkboxValue
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #F5F8FA;
		padding-bottom: 160rpx;
		height: 100vh;
		// padding-top: 130rpx;
	}

	.bnts {
		position: fixed;
		padding: 30rpx 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		z-index: 1;
	}

	.tit {
		padding: 24rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: 700;
	}

	.tophead {
		padding: 50rpx 24rpx 20rpx;
		background-color: #fff;
		font-size: 32rpx;
		color: #333;
		font-weight: 700;
		margin-bottom: 14rpx;

		.p2 {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.minus,
	.plus {
		display: flex;
		justify-content: center;
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		padding: 11rpx 9rpx;
		border: 1px solid #999;
		border-radius: 6rpx;
	}

	.input {
		margin: 0 30rpx;
		font-size: 28rpx;
	}

	.plus {
		background-color: #0EBFFE;
		border-color: #0EBFFE;
	}

	.white {
		background-color: #fff;
	}
</style>